<template>
	<div class="tools-warp">
		<el-card shadow="hover">
			<div slot="header">
				<div style=" display: flex;align-items: center;">
					<el-input v-model="parms.studentName" placeholder="请输入学员姓名" style="margin-right: 10px; width: 200px;"
						clearable></el-input><el-button type="primary" @click="sherchQuer">查询</el-button> 
				</div>
			</div>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="userName" label="家长名称" align="center" width="100px">
				</el-table-column>
				<el-table-column prop="studentName" label="学员名称" align="center">
				</el-table-column>
				
				<el-table-column prop="pstatus" label="是否签署" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.pstatus == 0">已签署</span>
						<span v-if="scope.row.pstatus == 1">已退回</span>
					</template>
				</el-table-column>
                <el-table-column prop="name" label="文件名" align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250px" align="center">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" type="warning" size="small">预览</el-button>
						<el-button @click="handleClick(scope.row)" :disabled="scope.row.pstatus == 1" type="danger" size="small">退回</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>
		
        <el-dialog title="预览" :visible.sync="dialoglook" width="90%">
			<div>
                 <embed  :src="pdfUrl"
                    type="application/pdf"
                    width="100%"
                    height="800px">
                        </div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialoglook=false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { allAdminApi } from '@/api/allapi';
import { Session } from '@/utils/storage';
const adminApi = allAdminApi();
export default {
    name: 'campus',
    data() {

        return {
            dialoglook:false,
            pdfUrl:"",

            tableData: [],
            total: 0,
            ruleForm: {
                name: '',
                phone: '',
                date: '',
                remarks: '',
                campusId: '',
            },
            parms: {
                limit: 10,
                page: 1,
                userName: "",
                studentName: "",
            },
            headers: { Authorization: 'bearer ' + `${Session.get('token')}` },
        };
    },
    mounted() {
        this.sherchList()
    },
    methods: {
        handleSuccess(res) {
            this.$message({
                type: 'success',
                message: '导入成功!'
            });
            this.sherchList()
        },
        sherchQuer() {
            this.parms.page = 1
            this.sherchList()
        },
        handleCurrentChange(val) {
            this.parms.page = val
            this.sherchList()
        },
        sherchList() {
            adminApi.agreelistPcApi(this.parms).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.result;
                    this.total = res.count;
                }
            })
        },
        handleEdit(row) {
            this.dialoglook = true;
            this.pdfUrl = row.filePath;
        },
        handleClick(row) {
            this.$confirm('此操作将让学员重新签署协议, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                adminApi.outresignApi(row.id).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '退回成功!'
                        });
                        this.sherchList()
                    }
                })
            })
        },
    },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>